<template>
	<view class="cu-item devices" :class="{'bg-white':!isDeviceIntroduceDetail}"
				@tap="isDeviceIntroduceDetail ?'' :rowClick(message)">
		<!-- 内容 -->
		<view class="content">
			<view>
				<image v-if="!isDeviceIntroduceDetail" :src="`https://statics.xmcsrv.net/weixin/cloud/device/small/netCellular.svg`" style="padding:3px;width:78upx;height:80upx;"
					mode="aspectFit"></image>
				<view class="inline-block text-df padding-tb-sm">
					<view style="margin-left: 16upx;">
						<!-- 流量 -->
						<view :class="isDeviceIntroduceDetail?'detail-title':''">{{$t('JLink.groups.netCellular')}}</view>
						<view class="text-sm">
							<view class="height">
								<text v-if="message.expireTime" :class="message.expirationtimeColor&&message.expirationtimeColor!='reds' ? 'text-gray':'text-reds'">{{message.expireTime}}</text>
								<!-- 未开通 -->
								<text v-else class="text-gray">{{$t('JLink.deviceMessage.unBuy')}}</text>
							</view>
							<view class="height text-gray">
								<view v-if="message.expireTime">
									<!-- 已到期，点击续费 -->
									<text v-if="message.expirationtimeColor==='reds'" class="text-reds">{{$t('JLink.deviceMessage.expire')}}</text>
									<view v-else>
										<!-- 无限流量 -->
										<view v-if="message['net.cellular.storagespace']>=20">
											{{$t('JLink.deviceMessage.wirelessTraffic')}}
										</view>
										<!-- 正常流量 -->
										<view v-else>
											<!-- 已使用流量 -->
											<view>{{$t('JLink.deviceMessage.usedTraffic')}}：{{message['net.cellular.used']}}G</view>
											<!-- 总共流量 -->
											<view>{{$t('JLink.deviceMessage.totalTraffic')}}：{{message['net.cellular.storagespace']}}G</view>
										</view>
									</view>
								</view>
								<!-- 点击开通 -->
								<text v-else>{{$t('JLink.deviceMessage.clickOpen')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作 -->
		<view class="action" :class="isDeviceIntroduceDetail ? 'detail-button':''">
			<!-- 购买已过期 -->
			<view v-if="message.expireTime">
				<!-- 续费 -->
				<button v-if="message.expirationtimeColor=='reds'" data-code="603007" data-eventName="deviceList_netCellular_renewal" class="cu-btn round line-red text-sm" @tap.stop="jumpBuy(message)">{{$t('JLink.publicText.renewal')}}</button>
				<button v-else-if="message['net.cellular.storagespace']>20" data-code="603005" data-eventName="deviceList_netCellular_check" class="cu-btn round line-primary text-sm"  @tap.stop="jumpBuy(message)">{{$t('JLink.deviceMessage.Check')}}</button><!-- 查看 -->
				<button v-else data-code="603005" data-eventName="deviceList_netCellular_check" class="cu-btn round line-primary text-sm" @tap.stop="jumpBuy(message)">{{$t('JLink.deviceMessage.Check')}}</button>
			</view>
			<view v-else>
				<!-- 去开通 -->
				<button data-code="603006" data-eventName="deviceList_netCellular_goBuy" class="cu-btn round line-black" @tap.stop="jumpBuy(message)">{{$t('JLink.deviceMessage.open')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'netCellular',
	props: {
		message: {
			type: Object,
			default: () => {
				return {
					expirationtime: '',
				}
			}
		},
		// 新UI特定属性
		isDeviceIntroduceDetail: {
			type: Boolean,
			default: () => {
				return false
			}
		}
	},
	methods: {
		// 续费 和 开通 按钮
		rowClick (message){
		   const { classifyId, sn } = message;
			this.$routing(`${this.$pages.buyDefault}?classifyId=${classifyId}&sn=${sn}`)
		},
		// 一整行点击
		jumpBuy(message){
			const { channelsArr, classifyId, sn } = message;
			if (channelsArr && channelsArr.length > 0) { // 多通道
			    let deviceMessage = JSON.stringify(message)
			    this.$routing(`${this.$pages.channels}?classifyId=${classifyId}&sn=${sn}&deviceMessage=${deviceMessage}`)
			} else { //单通道
			    this.$routing(`${this.$pages.buyDefault}?classifyId=${classifyId}&sn=${sn}`)
			}
		}
	}
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
.height {
	min-height: 1.2rem;
	max-height:3.2rem
}
.devices{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}
// 新ui特定样式
.detail-button {
	position: fixed;
	left:70rpx;
	top:180rpx;
	z-index: 999;
}
.detail-title{
	color:black;
	font-weight:500;
}
</style>
